<template>
	<view class="tab-bar">
		<view v-for="(nav, index) in navs" :key="index" :class="{ 'active': currentNav === nav.value }"
			@click="handleNavClick(nav)" class="tab-bar-item">
			<text>{{ nav.label }}</text>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	navs: {
		type: Array,
		default: () => [
			{ label: '首页', value: 'home' },
			{ label: '社区', value: 'community' },
			{ label: '消息', value: 'message' },
			{ label: '我的', value: 'me' }
		]
	},
	currentNav: {
		type: String,
		default: 'home'
	}
})

const emit = defineEmits(['nav-change'])
const handleNavClick = (nav) => {
	emit('nav-change', nav.value)

	// 统一使用navigateTo跳转
	const pageExists = ['home', 'community', 'message', 'me'].includes(nav.value)
	if (pageExists) {
		uni.redirectTo({
			url: `/pages/${nav.value}/${nav.value}`,
			fail: (err) => {
				console.error('跳转失败:', err)
				uni.showToast({
					title: '页面加载失败',
					icon: 'none'
				})
			}
		})
	} else {
		uni.showToast({
			title: '该页面暂未开放',
			icon: 'none'
		})
	}
}

</script>

<style scoped>
.tab-bar {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
	display: flex;
	background: #fff;
	z-index: 1000;
}

.tab-bar-item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	color: #666;
	transition: all 0.3s;
}

.tab-bar-item.active {
	color: var(--dominant-hue);
	font-weight: bold;
	transform: scale(1.1);
}
</style>